<template>
  <div>
    <van-nav-bar
      title="我的订单"
      left-text=""
      left-arrow
      @click="backlink()"
    ></van-nav-bar>
    <div>
      <van-search
        v-model="searchvalue"
        shape="round"
        placeholder="请输入搜索内容"
        class="search"
      >
        <template #right-icon>
          <van-button
            text="搜索"
            @click="searchorder"
            class="searchbtn"
          ></van-button>
        </template>
      </van-search>
    </div>
    <div style="display: flex; width: 100%; align-items: center">
      <van-tabs
        v-model:active="active"
        style="width: 100vw"
        @change="tabchange"
      >
        <van-tab title="全部" name="0"> </van-tab>
        <van-tab title="待付款" name="1"> </van-tab>
        <van-tab title="已付款" name="2"> </van-tab>
        <van-tab title="待发货" name="3"> </van-tab>
        <van-tab title="待收货" name="4"> </van-tab>
        <van-tab title="确认收货" name="5"> </van-tab>
        <van-tab title="评价" name="6"> </van-tab>
        <van-tab title="退款售后" name="7"> </van-tab>
      </van-tabs>
    </div>
    <div class="ordercontainer" v-if="orderlist.length != 0">
      <div v-for="(item, index) in orderlist" :key="index">
        <div
          v-if="item.type == 'table' && (active == 0 || active == 1)"
          class="ordercard"
        >
          <div class="store_name">
            <div>
              <icon-svg
                icon-class="order_club"
                icon-color="#304056"
                class="club-icon"
              ></icon-svg
              >{{ item.store_name }}
            </div>
            <div v-if="item.order_status == 1">已完成</div>
            <div v-if="item.order_status == 2">已完成</div>
          </div>
          <div class="orderinfo">
            <div style="display: flex; margin-bottom: 10px">
              <div class="storecover_image">
                <img v-lazy="item.storecover_image" alt="" />
              </div>
              <div class="contentbox">
                <div class="content">{{ item.ordercontent }}</div>
                <div class="order_time">下单时间：{{ item.order_time }}</div>
                <van-text-ellipsis class="order_time" :content="item.address" />
              </div>
            </div>
            <div class="heji">合计：{{ item.pay_money }}元</div>
          </div>
          <div style="margin-top: 10px">
            <van-button class="chakanbtn">查看详情</van-button>
          </div>
        </div>
        <div
          v-if="item.type == 'zhujiao' && (active == 0 || active == 2)"
          class="ordercard"
        >
          <div class="store_name">
            <div>
              <icon-svg
                icon-class="order_club"
                icon-color="#304056"
                class="club-icon"
              ></icon-svg
              >{{ item.store_name }}
            </div>
            <div v-if="item.order_status == 1">预约中</div>
            <div v-if="item.order_status == 2">已完成</div>
          </div>
          <div class="orderinfo">
            <div style="display: flex; margin-bottom: 10px">
              <div class="storecover_image">
                <img v-lazy="item.zhujiao_image" alt="" />
              </div>
              <div class="contentbox">
                <div class="content">{{ item.zhujiao_name }}</div>
                <div class="order_time">下单时间：{{ item.order_time }}</div>
                <div class="order_time">预约时间：{{ item.time }}</div>
              </div>
            </div>
            <div class="heji">合计：{{ item.pay_money }}元</div>
          </div>
          <div style="margin-top: 10px">
            <van-button class="chakanbtn">查看详情</van-button>
          </div>
        </div>
      </div>
    </div>
    <div class="ordercontainer" v-else>
      <div style="font-size: 20px; margin: 50% auto">暂无订单</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      searchvalue: "",
      orderlist: [],
    };
  },
  methods: {
    backlink() {
      this.$router.back();
    },
    searchorder() {},
    tabchange() {},
  },
};
</script>

<style scoped>
.search {
  background-color: transparent !important;
  padding-left: 20px;
  padding-bottom: 0;
}

::v-deep .van-search__content--round {
  /* 勿删，搜索框外边框 */
  border: 1px solid #5f94fe;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  border-radius: 12px;
}
.searchbtn {
  width: 50px;
  height: 25px;
  margin-bottom: 5px;
  margin-right: -5px;
  font-size: 14px;
  color: #fff;
  border-radius: 8px;
  padding: 0 5px;
  background-color: #5f94fe;
}
.ordercontainer {
  width: 100%;
  min-height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;
}
.ordercard {
  width: 100%;
  background-color: white;
  box-sizing: border-box;
  margin: 10px auto;
  padding: 8px 20px 8px 20px;
  display: flex;
  flex-direction: column;
}
.store_name {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  height: 30px;
  border-bottom: 1px solid rgb(179, 179, 179);
}
.club-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.orderinfo {
  margin-top: 10px;
  border-bottom: 1px solid rgb(179, 179, 179);
}
.storecover_image {
  width: 80px;
  height: 80px;
  border-radius: 15px;
  overflow: hidden;
}
.storecover_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contentbox {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 10px;
  width: 80%;
}
.contentbox .content {
  font-size: 18px;
  font-weight: 550;
}
.order_time {
  font-size: 16px;
  color: gray;
}
.heji {
  font-size: 18px;
  font-weight: 550;
  margin-bottom: 5px;
  display: flex;
  justify-content: flex-end;
}
.chakanbtn {
  width: 100px;
  height: 32px;
  border-radius: 20px;
  float: right;
  margin-right: 5px;
  border: 1px solid black;
}
</style>